<template>
	<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :show="show"
		style="width: 100%;background-color: #FFFFFF;">
		<view class="flex justify-center align-center bg-white shadow-warp"
			style="flex-direction: column;width: 100%;height: 300upx;">
			<view @tap="switchStatus" class="flex justify-end align-center text-xl padding-right" style="width: 100%;">
				<text class="cuIcon-close text-gray"></text>
			</view>
			<view class="flex justify-center align-center padding-bottom-sm" style="width: 100%;">
				<text v-if="isStart==false" class="text-df text-black">点击开始录音</text>
				<text v-else class="text-df text-black">{{format(duration)}}</text>
			</view>
			<view class="flex justify-around align-center" style="width: 100%;">
				<view @tap="reStart" class="flex justify-center align-center" style="flex-direction: column;">
					<view class="round line-gray text-xl"><text class="cuIcon-refresh"></text></view>
					<text class="text-grey">重录</text>
				</view>
				<view @tap="startRecord" class="bg-gray round flex justify-center align-center"
					style="width: 150upx;height: 150upx;">
					<view class="bg-gradual-orange round flex justify-center align-center"
						style="width: 130upx;height: 130upx;">
						<view class="text-xl">
							<text :class="'text-white cuIcon-'+recordIcon"></text>
						</view>
					</view>
				</view>
				<view @tap="saveAction" class="flex justify-center align-center" style="flex-direction: column;">
					<view class="round line-gray text-xl"><text class="cuIcon-check"></text></view>
					<text class="text-grey">保存</text>
				</view>
			</view>
		</view>
	</uni-transition>
</template>

<script>
	import uniTransition from '@/components/uni-transition/components/uni-transition/uni-transition.vue'
	export default {
		name: "AudioRecord",
		components: {
			uniTransition
		},
		computed: {
			recordIcon() {
				if (this.isStart == false) {
					return 'voice'
				}
				if (this.isRecording) {
					return 'stop'
				}
				return 'playfill'
			}
		},
		data() {
			return {
				durationTimer: null,
				recorderManager: uni.getRecorderManager(),
				show: false,
				modeClass: 'fade',
				duration: 0,
				maxDuration:30000,
				isRecording: false,
				isStart: false,
			};
		},
		created() {
			let self = this;
			this.recorderManager.onStop(function(res) {
				console.log('recorder stop' + JSON.stringify(res));
				self.$emit('save', res.tempFilePath)
			});
		},
		methods: {
			reStart() {
				this.duration = 0
				this.recorderManager.start({
					format: 'mp3'
				})
				let that = this
				this.durationTimer = setInterval(() => {
					that.duration += 1
				}, 1000)
				this.isStart = true
				this.isRecording = true
			},
			format(num) {
				return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 -
					String(Math.floor(num % 60)).length) + Math.floor(num % 60)
			},
			startRecord() {
				if (this.isStart) {
					if (this.isRecording) {
						this.recorderManager.pause()
						this.isRecording = false
						clearInterval(this.durationTimer)
					} else {
						this.recorderManager.resume()
						this.isRecording = true
						let that = this
						this.durationTimer = setInterval(() => {
							that.duration += 1
						}, 1000)
					}
					return
				}
				this.recorderManager.start({
					format: 'mp3',
					duration:this.maxDuration
				})
				let that = this
				this.durationTimer = setInterval(() => {
					that.duration += 1
				}, 1000)
				this.isStart = true
				this.isRecording = true
			},
			saveAction() {
				this.recorderManager.stop()
				this.isStart = false
				this.isRecording = false
				this.hiddenTabbar()
			},
			switchStatus() {
				if (this.show) {
					this.hiddenTabbar()
				} else {
					this.showTabbar()
				}
			},
			showTabbar() {
				if (this.show) {
					return
				}
				this.show = true
				this.modeClass = ['fade', 'slide-bottom']
				this.$emit('onShow')
			},
			hiddenTabbar() {
				if (!this.show) {
					return
				}
				this.show = false
				this.modeClass = ['fade', 'slide-bottom']
				this.$emit('onHidden')
			},
		},
	}
</script>

<style lang="scss">

</style>
